<!DOCTYPE html>
<html lang="zh-cn">
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="keywords" content="商城">
    <meta name="description" content="">
    <title>黑马商城-商品详情</title>

    <link href="/plugins/zui/css/zui.css" rel="stylesheet">
    <link href="/plugins/zui/css/zui-theme.css" rel="stylesheet">
    <link href="/css/my.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="/plugins/zui/lib/ieonly/html5shiv.js"></script>
    <script src="/plugins/zui/lib/ieonly/respond.js"></script>
    <script src="/plugins/zui/lib/ieonly/excanvas.js"></script>
    <![endif]-->
</head>
<body>

<div id="top"></div>
<!-- 主内容 -->
<div class="wrapper">
    <!-- 面包屑导航 -->
    <ol class="breadcrumb">
        <li>
            <span class="breadcrumb-title">当前位置：</span>
            <a href="/main">首页</a>
        </li>
        <li class="active" id="active">小米（XIAOMI）平板电脑2 WIFI版 7.9英寸</li>
    </ol>
    <!-- /面包屑导航 -->

    <!--  -->
    <div class="row">
        <!-- /左边 -->
        <div class="col-xs-9">
            <!-- 详情 -->
            <div class="panel panel-body">
                <div class="row">
                    <div class="col-xs-4">
                        <div class="product-image">
                            <img src="/img/mipad.jpg" title="小米（XIAOMI）平板电脑2 WIFI版 7.9英寸" alt="小米（XIAOMI）平板电脑2 WIFI版 7.9英寸" style="max-height: 290px" id="productimage">
                        </div>
                    </div>
                    <div class="col-xs-8">
                        <div class="product-property">
                            <h1 class="header-dividing" id="productname">小米（XIAOMI）平板电脑2 WIFI版 7.9英寸</h1>
                            <input type="hidden" name="id" id="prodId" value="14"/>
                            <ul class="list-unstyled">
                                <li>
                                    <span class="attr-name">价格</span>
                                    <span class="attr-value">￥<del><strong id="price">999.00</strong></del></span>
                                </li>
                                <li>
                                    <span class="attr-name">特价</span>
                                    <span class="attr-value">￥<strong class="text-danger" style="font-size: 16px" id="sale_price">999.00</strong></span>
                                </li>
                                <li>
                                    <span class="attr-name">状态</span>
                                    <span class="attr-value" id="inventory">有货</span>
                                </li>
                                <li id="countBox">
                                    <span class="attr-name">数量</span>
                                    <span class="attr-value">
                                        <div class="input-group" style="width: 120px">
                                            <span class="input-group-addon" onclick="minus(this)"><i class="icon icon-minus"></i></span>
                                            <input type="text" name="num" id="num" value="1" class="form-control" style="text-align: center;">
                                            <span class="input-group-addon" onclick="plus(this)"><i class="icon icon-plus"></i></span>
                                        </div>
									</span>
                                </li>
                            </ul>
                            <span>
                                <button id="cartBtn" class="btn btn-primary">
                                    <i class="icon icon-shopping-cart"></i> 加入购物车
                                </button>
                            </span>
                        </div>
                    </div>
                </div>
                <h5 class="header-dividing" style="margin-top: 30px;">
                    <i class="icon-file-text-alt text-muted"></i> 详情
                </h5>
                <div class="article-content" id="product-detail">
                    <div style="text-align:center;">
                        <img src="./img/mipad-1.jpg" alt=""/>
                        <img src="./img/mipad-2.jpg" alt=""/>
                        <img src="./img/mipad-3.jpg" alt=""/>
                        <img src="./img/mipad-4.jpg" alt=""/>
                        <img src="./img/mipad-5.jpg" alt=""/><br/>
                    </div>
                </div>
            </div>
            <!-- /详情 -->
        </div>
        <!-- /左边 -->

        <!-- 右边热卖 -->
        <div class="col-xs-3">
            <div class="panel">
                <div class="panel-heading">
                    <strong><i class="icon panel-icon icon-star"></i> 热销产品</strong>
                    <div class="pull-right">
                        <a href="/product/list?level=hots&id=11">更多</a>
                    </div>
                </div>
                <div class="panel-body cards cards-borderless" id="product-hot">
                    <div class="card">
                        <a href="/product_detail?id=14" target="_blank"><img src="/img/mipad.jpg" alt=""></a>
                        <div class="card-heading">
                            <span class="pull-right price">￥999.00</span>
                            <a href="/product_detail?id=14" target="_blank">小米（XIAOMI）平板电脑2 WIFI版 7.9英寸</a>
                        </div>
                    </div>

                    <div class="card">
                        <a href="/product_detail?id=13" target="_blank"><img src="/img/ipad.png" alt=""></a>
                        <div class="card-heading">
                            <span class="pull-right price">￥3,288.00</span>
                            <a href="/product_detail?id=13" target="_blank">Apple iPad mini 4 平板电脑 7.9英寸</a>
                        </div>
                    </div>

                    <div class="card">
                        <a href="/product_detail?id=10" target="_blank"><img src="/img/dell.jpg" alt=""></a>
                        <div class="card-heading">
                            <span class="pull-right price">￥8,999.00</span>
                            <a href="/product_detail?id=10" target="_blank">戴尔（DELL）XPS 13-9350-R1708 13.3英寸微边框笔记本电脑</a>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!-- /右边热卖 -->
    </div>
</div>
<!-- /主内容 -->

<div id="bottom"></div>
<!-- /右侧浮动栏 -->

<!-- 添加到购物车的对话框 -->
<div class="modal fade" id="addToCartModal">
    <div class="modal-dialog modal-sm">
        <form action="./profile" method="post" class="form-horizontal">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">×</span><span class="sr-only">关闭</span>
                    </button>
                    <h4 class="modal-title">商品成功加入购物车</h4>
                </div>
                <div class="modal-footer">
                    <a href="/main.html" class="btn btn-primary">继续购物</a>
                    <a href="/view_cart.html" class="btn btn-primary" style="min-width: 80px">查看购物车</a>
                </div>
            </div>
        </form>
    </div>
</div>
<!-- /添加到购物车 -->

<script src="/plugins/zui/lib/jquery/jquery.js"></script>
<script src="/js/jquery.scrollUp.min.js"></script>
<script src="/plugins/zui/js/zui.js"></script>
<script src="/js/include.js"></script>
<script src="/js/my.js"></script>

<script>
    $(function(){

            //获取由product_list.html传过来的商品id
            var id=window.location.search.split("=")[1];

            //发送ajax请求，获取对应id商品的详细信息
            $.ajax({
                url:"/product/findById",
                data:{"productId":id},
                success:function (data) {
                  $("#productimage").attr("src","/img/"+data.data.thumbnail).attr("title",data.data.name);  //为图片框的src属性赋值
                    $("#productname").html(data.data.name);  //给商品名称赋值
                    $("#price").html(data.data.price);  //给价格赋值
                    $("#sale_price").html(data.data.sale_price);  //给售价赋值

                    if(data.data.inventory-data.data.sales_volume>0){
                        $("#inventory").html("有货");
                    }else{
                        $("#inventory").html("无货");
                    }

                    $("#product-detail").html(data.data.detail_description);
                }
            })


            //为“添加购物车”按钮添加点击事件
            $("#cartBtn").click(function(){
                    //发送ajax请求，向购物车中添加商品
                    $.ajax({
                        url:"/cart/addCart",
                        type:"post",
                        data:{"productId":id,"number":$("#num").val()},
                        success:function(data){

                            if(data.flag=true){
                                //添加完购物车后，弹出对框，让用户选择是否继续购物
                                $("#addToCartModal").modal("show");
                            }
                        }

                    })
            })
    })



</script>





<script>
    function plus(component){

        var countInput = $(component).prev('input'); //获取input元素
        var num = parseInt(countInput.val()) + 1; //获取input中的值并转化成整数再加上1
        countInput.val(num); //把值赋给input
       // countInput.change(); //触发change事件

    }

    function minus(component){
        var countInput = $(component).next('input');
        if(countInput.val() <= 1) {
            return false;
        }
        countInput.val(parseInt(countInput.val()) - 1);
     //   countInput.change(); //触发change事件


    }
</script>
</body>
</html>